let vm = new Vue({
    el: '#app',
    // 修改Vue读取变量的语法
    delimiters: ['[[', ']]'],
    data: {
        username: '',		// 用户名
        password: '', 		// 密码
        password2: '',		// 确认密码
        mobile: '',			// 手机号
        image_code: '',     // 验证码
        sms_code:'',        // 短信验证码
        allow: '',			// 同意协议
        image_code_url: '', //图形验证码路径
        sms_code_tip: '获取短信验证码',
        send_flag: false,   //添加验证码标签，防止恶意点击
        uuid: '',

        error_name: false,
        error_password: false,
        error_password2: false,
        error_mobile: false,
        error_allow: false,
        error_image_code: false,
        error_sms_code: false,

        error_name_message: '',		  // 用户名错误提示
        error_mobile_message: '',	  // 密码错误提示
        error_image_code_message: '', // 图形验证码提示
        error_sms_code_message: '',   // 短信验证码提示
    },
    mounted() {
        //生命周期 - 页面加载完
        //生成图形验证码
        this.generate_image_code();
    },
    methods: {
        // 发送短信验证码
        send_sms_code() {
            //校验 手机号和验证码
            if (this.send_flag == true) {
                return; //已经在使用验证码，禁止恶意点击
            }
            this.send_flag = true;
            this.check_mobile();
            this.check_image_code();
            if (this.error_mobile == true || this.error_image_code == true) {
                this.send_flag = false;
                return;
            }
            let url = '/sms_codes/' + this.mobile + '/?image_code=' + this.image_code + '&uuid=' + this.uuid;
            axios.get(url, {responseType: 'json'})
                .then(res => {
                    if (res.data.code == '0') {
                        //展示倒计时60s
                        let second = 60
                        let t = setInterval(() => {
                            if (second == 1) {
                                //定时器停止 || 还原sms_code_tip提示  || 重新生成图形验证码
                                clearInterval(t);
                                this.sms_code_tip = '获取短信验证码';
                                this.generate_image_code();
                                this.send_flag = false;
                            } else {
                                second -= 1;
                                this.sms_code_tip = second + '秒';
                            }
                        }, 1000)
                    } else {
                        //
                        if (res.data.code == '4001') {
                            //图形验证码错误
                            this.error_image_code_message = res.data.errmsg;
                            this.error_image_code = true;
                        }else {
                            this.error_sms_code_message = res.data.errmsg;
                            this.error_sms_code = true;
                        }
                        this.send_flag = false;
                    }
                })
                .catch(err => {
                    //todo 异常报错使用弹窗提示
                    console.log(err.response);
                    this.send_flag = false;
                })
        },
        //生成图形验证码
        generate_image_code() {
            this.uuid = generateUUID();
            this.image_code_url = '/image_codes/' + this.uuid + '/';
        },
        // 校验用户名
        check_username() {
            // 准备正则表达式
            let re = /^[a-zA-Z0-9_-]{5,20}$/;
            // 正则表达式匹配用户名
            if (re.test(this.username)) {
                this.error_name = false;
            } else {
                this.error_name_message = '请输入5-20个字符的用户名';
                this.error_name = true;
            }
            // 判断用户是否重复注册
            if (this.error_name == false) {
                //只有当用户输的用户名满足条件时才会触发判断
                let url = '/usernames/' + this.username + '/count';
                axios.get(url, {'responseType': 'json'}).then(res => {
                    if (res.data.count == 1) {
                        //用户已存在
                        this.error_name_message = '用户名已存在';
                        this.error_name = true;
                    } else {
                        //用户不存在
                        this.error_name = false;
                    }
                }).catch(err => {
                    //todo 异常报错使用弹窗提示
                    console.log(err.response);
                })
            }
        },
        // 校验密码
        check_password() {
            let re = /^[0-9A-Za-z]{8,20}$/;
            if (re.test(this.password)) {
                this.error_password = false;
            } else {
                this.error_password = true;
            }

        },
        // 校验确认密码
        check_password2() {
            // 判断两次密码是否一致
            if (this.password != this.password2) {
                this.error_password2 = true;
            } else {
                this.error_password2 = false;
            }
        },
        // 校验手机号
        check_mobile() {
            let re = /^1[3-9]\d{9}$/;
            if (re.test(this.mobile)) {
                this.error_mobile = false;
            } else {
                this.error_mobile_message = '您输入的手机号格式不正确';
                this.error_mobile = true;
            }
            // 判断用户是否重复注册
            if (this.error_mobile == false) {
                //只有当用户输的用户名满足条件时才会触发判断
                let url = '/mobiles/' + this.mobile + '/count'
                axios.get(url, {'responseType': 'json'}).then(res => {
                    if (res.data.count == 1) {
                        //用户已存在
                        this.error_mobile_message = '手机号已注册';
                        this.error_mobile = true;
                    } else {
                        //用户不存在
                        this.error_mobile = false;
                    }
                }).catch(error => {
                    //todo 异常报错使用弹窗提示
                    console.log(error.response);
                })
            }
        },
        //校验图形验证码
        check_image_code() {
            if (!this.image_code) {
                this.error_image_code_message = '请填写图形验证码';
                this.error_image_code = true;
            } else {
                this.error_image_code = false;
            }
        },
        //校验短信验证码
        check_sms_code(){
            if (!this.sms_code) {
                this.error_sms_code_message = '请填写图形验证码';
                this.error_sms_code = true;
            } else {
                this.error_sms_code = false;
            }
        },
        // 校验是否勾选协议
        check_allow() {
            if (!this.allow) {
                this.error_allow = true;
            } else {
                this.error_allow = false;
            }
        },
        // 监听表单提交事件
        on_submit() {
            this.check_username();
            this.check_password();
            this.check_password2();
            this.check_mobile();
            this.check_sms_code();
            this.check_allow();

            if (this.error_name == true || this.error_password == true || this.error_password2 == true
                || this.error_mobile == true ||  this.error_sms_code == true || this.error_allow == true) {
                // 禁用表单的提交
                window.event.returnValue = false;
            }
        },
    }
});